<template>
	<view class="container">
		<image class="logo" :src="logoUrl"></image>
		<view class="title">{{info}}</view>
		<view class="tips"> {{Mtip}}</view>
		<view class="explain">
			<view class="title">更新说明</view>
			<view class="text" v-html="updateInfo">
				
			</view>
		</view>
		<view class="minorContent bottom_aera">
			<view v-if="startProgress && !currentIsLatest" class="smallTitle">
				<text>下载进度:{{ downloadProgress }}%</text>
				<progress :percent="downloadProgress" stroke-width="4" activeColor="#2A9F93"/>
			</view>
			<button v-if="!startProgress && !currentIsLatest" @click="handleUpdate()" hover-class="none">立即更新</button>
		</view>
		<view class="copyright">Copyright © 上海经始网络科技有限公司版权所有</view>
	</view>
</template>

<script>
	export default {
		components: {

		},
		data() {

			return {
				logoUrl: this.$mAssetsPath.logo,
				value:'#e471',
				info: '正在加载', // 主标题显示版本号
				Minfo: '未知', // 副标题显示版本类型
				Mtip: '', // 小提示标语
				updateInfo: '无', // 更新摘要

				latest: null, // 版本信息
				packgeSize: null, // 更新包大小
				packgePath: null, // 更新包的文件地址
				downloadTask: null, // 下载任务
				downloadProgress: 0, // 下载进度

				buttonLoading: false, // 加载 - 标记
				installed: false, // 是否执行了安装 - 标记
				startProgress: false, // 下载进行 - 标记
				currentIsLatest: true ,// 当前版本就是最新版本 - 标记
				buttonHide:'',
			}
		},
		onReady() {
			 this.getLatest()
			 const updated = uni.getStorageSync('updated')
			 if (updated.packgePath) {
			   this.packgePath = updated.packgePath
			 } 
		},
		// 如果用户下载后没有完成安装，却回到app，则执行这里
		onShow() {
			if (this.installed === true && this.packgePath) {
				this.installed = false
				this.haveDownloaded()
			}
		},
		// 用户关闭页面时检查是否存在下载任务
		onUnload() {
			if (this.downloadTask) {
				this.closeTask()
				this.showToast('更新被取消')
			}
		},
		// 下拉刷新更新
		onPullDownRefresh() {
			this.getLatest()
			uni.stopPullDownRefresh()
		},
		methods: {
			// 封装个Toast方便用
			showToast(text) {
				uni.showToast({
					title: text,
					duration: 3000,
					icon: 'none'
				})
			},
			installPackge() {
				// #ifdef APP-PLUS
				// 安装更新
				plus.runtime.install(this.packgePath, {
					force: true
				}, function() {
					//完成更新向服务器进行通知
					uni.setStorage({
						key: 'updated',
						data: {
							completed: true,
							packgePath: updated.packgePath
						},
						success: (res) => {
							console.log('成功安装上次的更新，应用需要重启才能继续完成')
						}
					}) 
					plus.runtime.restart();   
				},function(err){
					console.log(JSON.stringify(err));
				});
				// #endif
				this.installed = true
				// 保存更新记录到stroage，方便下次启动app时删除安装包
				uni.setStorage({
					key: 'updated',
					data: {
						completed: true,
						packgePath: this.packgePath
					},
					success: (res) => {
						console.log('成功保存更新记录')
					}
				})
				// 判断是否为热更新（判断文件名中是否含有.wgt）
				if (this.packgePath.match(RegExp(/.wgt/))) {
					this.installed = false
					uni.showModal({
						title: '提示',
						content: '应用将重启以完成更新',
						showCancel: false,
						complete: () => {
							plus.runtime.restart()
						}
					})
				}
			},
			// 已经下载了更新包但是没有安装
			haveDownloaded() {
				var _this = this;
				uni.showModal({
					title: '更新尚未完成',
					content: '您已下载更新包，但是还没有完成安装，请问是否要继续安装更新包呢？',
					success: (res) => {
						if (res.confirm) {
							// 安装
							_this.installPackge()
						} else if (res.cancel) {
							_this.showToast('更新被取消')
						}
					}
				})
			},
			// 取得最新版本及其所有信息
			getLatest() {
				this.info = '正在加载' // 主标题显示版本号
				this.Minfo = '未知' // 副标题显示版本类型
				this.updateInfo = '无' // 更新摘要

				this.buttonLoading = true
				this.latest = null

				uni.request({
					url: this.$mConfig.versionUrl,
					method: "GET",
					header: {
						'content-type': 'application/x-www-form-urlencoded',
						"X-requested-With": "XMLHttpRequest"
					},
					data: {
						client: '21'
					},
					success: (res) => {
						console.log(res.data.code)
						if (res.data.code == 200) {
							const response = res.data.data
							console.log(JSON.stringify(res.data.data))
							this.latest = response
							this.buttonLoading = false
							this.checkLatest()
						}
					}
				})
			},
			// 检查版本
			checkLatest() {
				var _this = this;
				// #ifdef APP-PLUS
				plus.runtime.getProperty(plus.runtime.appid, function(inf) {
					//this.$current.id = inf.version;
					console.log(_this.latest.version)
					console.log(JSON.stringify(inf) )
					var version = inf.version;
					var  currentId = version.split('.');
					var versionCode = currentId.join('');
					console.log(versionCode);
					if (!_this.latest.versionId) {
						_this.Mtip = '未找到发行版本'
					} else if (versionCode < _this.latest.versionId) { // 当前版本与新版本不符（$current在main.js里）
						_this.currentIsLatest = false
						_this.Mtip = '发现新版本'
						_this.info = _this.$mConfig.copyrightTxt + ' ' + _this.latest.version //名称 版本号
						//_this.updateInfo = _this.latest.remark
						
						var richtext = _this.latest.remark					
						const regexn = new RegExp('&amp;$nbsp;', 'gi');
						  richtext = richtext.replace(regexn, ' ');
						  richtext = richtext.replace(/\n/g,"<br/>"); 
						_this.updateInfo = richtext.replace(/\s/g, '<span style="padding-left:4px"> </span>');
						
						
						
						//this.packgeSize = (this.latest.packgeSize / 1048576).toFixed(2) + 'MB' // 请求取得的packgeSize是字节大小，转换为保留两位小数的MB
						_this.setMinfo(_this.$mConfig.minfo)
					} else {
						_this.showToast('当前是最新版了')
						_this.currentIsLatest = true
						_this.Mtip = '当前是最新版'
						_this.info = _this.$mConfig.copyrightTxt + ' ' + _this.latest.version //名称 版本号
						_this.updateInfo = _this.latest.remark
						_this.setMinfo(_this.$mConfig.minfo)
					}
				})
				// #endif
			},
			// 根据英文版本类型选择中文版本类型
			setMinfo(type) {
				switch (type) {
					case 'base':
						this.Minfo = '结构版'
						break
					case 'alpha':
						this.Minfo = '内测版'
						break
					case 'beta':
						this.Minfo = '公测版'
						break
					case 'rc':
						this.Minfo = '终测版'
						break
					case 'release':
						this.Minfo = '正式版'
						break
					default:
						this.Minfo = '未知'
				}
			},
			// 关闭下载任务
			closeTask() {
				this.downloadTask.abort()
				this.downloadTask = null
				this.startProgress = false
			},
			// 开始下载任务
			createTask(downloadLink) {
				//判断是否已经存在任务
				if (this.packgePath) {
					this.haveDownloaded()
				} else {
					this.downloadProgress = 0
					this.startProgress = true
					// 创建下载任务对象
					//if(downloadLink.indexOf('http') === -1) downloadLink= "http://files.zhihuiark.com" + downloadLink;
					this.downloadTask = uni.downloadFile({
						url: downloadLink,
						success: (res) => {
							if (res.statusCode === 200) {
								// 保存下载的安装包
								uni.saveFile({
									tempFilePath: res.tempFilePath,
									success: (res) => {
										this.packgePath = res.savedFilePath
										// 进行安装
										this.installPackge()
										// 任务完成，关闭下载任务
										this.closeTask()
									}
								})
							}
						}
					})
					// 进度条更新
					this.downloadTask.onProgressUpdate((res) => {
						this.downloadProgress = res.progress
					})
				}
			},
			handleUpdate() {
				// #ifdef APP-PLUS
				// 判断系统类型
				if (plus.os.name.toLowerCase() == 'android') {
					console.log(this.latest.url)
					if (this.latest.url && this.latest.url !== '#') { // 我这里默认#也是没有地址，请根据业务自行修改
						// 安卓：创建下载任务
						this.createTask(this.latest.url)
					} else {

						this.showToast('未找到下载地址')
					}
				} else {
					if (this.latest.url && this.latest.url !== '#') { // 我这里默认#也是没有地址，请根据业务自行修改
						// 苹果(A)：进行热更新（如果iosLink是wgt更新包的下载地址）判断文件名中是否含有.wgt
						if (this.latest.url.match(RegExp(/.wgt/))) {
							this.createTask(this.latest.url)
						} else {
							// 苹果(B)：打开商店链接（如果iosLink是苹果商店的地址）
							plus.runtime.openURL(this.latest.url)
						}
					} else {
						this.showToast('未找到ios商店地址')
					}
				}

				// #endif
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		display: flex;
		flex-direction: column;
		align-items: center;
		.explain{
			width: 100%;
			margin-top: 150upx;
			padding: 0 43upx;
			.text{
				font-size: 28upx;
				color: #888D99;
				line-height: 50upx;
				margin-top: 20upx;
			}
		}
		.copyright{
			font-size: 28upx;
			color: #888D99;
			line-height: 50upx;
			margin-top: 20upx;
			position: absolute;
			bottom: 45upx;
		}
		.logo {
			width: 207upx;
			height: 207upx;
			margin-top: 80upx;
		}
	
		.title {
			font-size: 36upx;
			line-height: 36upx;
			color: #0D1D36;
		}
	
		.tips {
			color: #4B9CFF;
			margin-top: 30upx;
			font-size: 28upx;
		}
	}
	
	.minorContent {
		background: #fff;
		width: 100%;
		display: flex;
		justify-content: center;
	}
	
	.minorContent button,button[type=primary] {
		height: 100rpx;
		border-radius: 45px;
		width: 80%;
		left: 10%;
		font-size: 40rpx;
		color: #fff;
		background: #e50d01;
		position: fixed;
		bottom: 170rpx;
	}
	
	.process {
		margin-top: 200rpx;
		margin-left: 30%;
	}
	
</style>
